<template>
  
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>最新消息</h5>
          <div class="ibox-tools">
            <span class="label label-warning-light">10条未读</span>
          </div>
        </div>
        <div class="ibox-content">
          <div>
            <div class="feed-activity-list">
              <!----这部分开始循环 -->
              <div
                class="feed-element"
                v_bind
                :key="i"
                v-for="(commont, i) in commonts"
              >
                <a href="profile.html" class="pull-left">
                  <img alt="image" class="img-circle" :src="commont.avatar" />
                </a>
                <div class="media-body ">
                  <small class="pull-right">{{ commont.time }}</small>
                  <strong>{{ commont.author }}</strong> 评论了
                  <br />
                  <small class="text-muted">2014.11.8 12:22</small>
                  <div class="well">
                    {{ commont.title }}
                  </div>
                  <div class="pull-right">
                    <a class="btn btn-xs btn-white"
                      ><i class="fa fa-thumbs-up"></i> 喜欢
                    </a>
                  </div>
                </div>
              </div>
              <!----这部分开始循环 -->
            </div>

            <button class="btn btn-primary btn-block m-t">
              <i class="fa fa-arrow-down"></i> 加载更多
            </button>
          </div>
        </div>
      </div>
    
</template>
<style>
@import "../css/bootstrap.min.css";
@import "../css/style.min.css";
</style>
<script>
export default {
  name: "commonts",
  data() {
    return {
      commonts: [
        {
          id: 1,
          avatar: "/static/img/a2.jpg",
          time: "100分钟i前",
          author: "小可爱",
          title: "今晚打老虎"
        },
        {
          id: 2,
          avatar:"/static/img/a1.jpg",
          time: "100分钟i前",
          author: "小可爱",
          title: "今晚打老虎"
        },
        {
          id: 3,
          avatar: "/static/img/a3.jpg",
          time: "100分钟i前",
          author: "小可爱",
          title: "今晚打老虎"
        },
        {
          id: 4,
          avatar: "/static/img/a5.jpg",
          time: "100分钟i前",
          author: "小可爱",
          title: "今晚打老虎"
        }
      ],
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>
